<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<swiper class="banner" autoplay indicator-dots indicator-color="#ffffff" indicator-active-color="#c55a5c">
				<swiper-item v-for="item in silder" :key="item">
					<image class="photo" :src="item" mode="" />
				</swiper-item>
			</swiper>
			<view class="cate">
				<view class="cate-item" v-for="item in cate_icon">
					<image class="cate-img" :key="item.id" :src='item.src' mode=""></image>
					<view class="cate-title">{{item.title}}</view>
				</view>
			</view>
			<view class="bg-img">
				<image src="../../static/img/index/banner-2.png" mode=""></image>
			</view>
		</view>
		<!-- 厂家直销 -->
		<view class="factory">
			<view class="factory-header">
				<view class="factory-title">厂家直销</view>
				<u-line color="#bbbbbb" length="10%" margin="8rpx auto 8rpx auto"></u-line>
				<view class="factory-tip">FACTORY OUTLET</view>
			</view>
			<view class="factory-goods">
				<view class="factory-detail" v-for="item in factory_img" :key="item.id">
					<view class="detail-title">{{item.title}}</view>
					<view class="detail-info">
						<view class="detail-price">{{item.price}}</view>
						<image class="detail-img" :src="item.src" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 新品首发 -->
		<view class="new">
			<view class="new-header">
				<view class="new-title">新品首发</view>
				<u-line color="#bbbbbb" length="10%" margin="8rpx auto 8rpx auto"></u-line>
				<view class="new-tip">NEWS</view>
			</view>
			<view class="new-gooods">
				<view class="new-detail" v-for="item in news" :key="item.id">
					<image class="detail-img" :src="item.src" mode=""></image>
					<view class="detail-title">{{item.title}}</view>
					<view class="detail-profile">{{item.intro}}</view>
					<view class="detail-price">{{item.price}}</view>
				</view>
			</view>
		</view>
		<!-- 精品热卖 -->
		<view class="hot">
			<view class="hot-header">
				<view class="hot-title">精品热卖</view>
				<u-line color="#bbbbbb" length="10%" margin="8rpx auto 8rpx auto"></u-line>
				<view class="hot-tip">SALE</view>
			</view>
			<view class="hot-list">
				<view class="hot-detail" v-for="item in hot" :key="item.id">
					<image :src="item.src" mode=""></image>
					<view class="detail-title">{{item.title}}</view>
					<view class="detail-price">{{item.price}}</view>
				</view>
			</view>
		</view>
		<view class="spelling">
			<view class="singles">
				<image src="../../static/img/index/pic-1.jpg" mode=""></image>
			</view>
			<view class="globe">
				<image src="../../static/img/index/pic-2.jpg" mode=""></image>
				<image src="../../static/img/index/pic-3.jpg" mode=""></image>
			</view>
		</view>
		<!-- 精选优品 -->
		<view class="excellent">
			<view class="excellent-header">
				<view class="excellent-title">精选优品</view>
				<u-line color="#bbbbbb" length="10%" margin="8rpx auto 8rpx auto"></u-line>
				<view class="excellent-tip">SELECTION</view>
			</view>
			<u-swiper :list="excellent" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
				bgColor="#ffffff"></u-swiper>
		</view>
		<!-- 好物推荐 -->
		<view class="recommend">
			<view class="recommend-header">
				<view class="recommend-title">好物推荐</view>
				<u-line color="#bbbbbb" length="10%" margin="8rpx auto 8rpx auto"></u-line>
				<view class="recommend-tip">RECOMMEND</view>
			</view>
			<view class="recommend-gooods">
				<view class="recommend-detail" v-for="item in recommend" :key="item.id">
					<image class="detail-img" :src="item.src" mode=""></image>
					<view class="detail-title">{{item.title}}</view>
					<view class="detail-profile">{{item.intro}}</view>
					<view class="detail-price">{{item.price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				silder: ['../../static/img/index/banner1.jpg', '../../static/img/index/banner2.jpg'],
				cate_icon: [
					{ id: 1, src: '../../static/img/index/icon-1.png', title: '新品/热销' },
					{ id: 2, src: '../../static/img/index/icon-2.png', title: '超值拼团' },
					{ id: 3, src: '../../static/img/index/icon-3.png', title: '新人福利' },
					{ id: 4, src: '../../static/img/index/icon-4.png', title: '时尚动态' },
				],
				factory_img: [
					{ id: 1, src: '../../static/img/index/img-7.png', title: '“痕印”双肩包INCOMPLE', price: '2190元起' },
					{ id: 2, src: '../../static/img/index/img-8.png', title: '素雅电绣小白鞋CM286', price: '369元起' },
					{ id: 3, src: '../../static/img/index/img-9.png', title: '灯心绒棒球帽DEFAULT', price: '200元起' },
					{
						id: 4,
						src: '../../static/img/index/img-10.png',
						title: '无数字手表DANIEL W-ELINGTON',
						price: '369元起'
					},
				],
				news: [{
						id: 1,
						src: '../../static/img/index/photo-1.png',
						title: '无声派对复古镜-A',
						intro: '选用优质金属 镜框双色点缀',
						price: '￥249'
					},
					{
						id: 2,
						src: '../../static/img/index/photo-2.png',
						title: '镜面不锈钢双耳连盖汤煲',
						intro: '食品级304不锈钢 复合底',
						price: '￥359'
					},
					{
						id: 3,
						src: '../../static/img/index/photo-3.png',
						title: '纳米水离子空气净化器',
						intro: '美容、润肤 除甲醛、烟等有害气体',
						price: '￥249'
					},
					{
						id: 4,
						src: '../../static/img/index/photo-4.png',
						title: 'S.PRINCESS荞麦保健枕',
						intro: '全面面料 双面工艺 单面荞麦',
						price: '￥89'
					},
				],
				hot: [
					{ id: 1, src: '../../static/img/index/img-6.png', title: '英式经典三防女式长风衣', price: '￥599' },
					{ id: 2, src: '../../static/img/index/img-2.png', title: '超轻至暖铜氨丝白鹅绒被', price: '￥999' },
					{ id: 3, src: '../../static/img/index/img-3.png', title: '羊毛混纺经典长款大衣', price: '￥1299' },
					{ id: 4, src: '../../static/img/index/img-1.png', title: '创意懒人叠衣板+收纳箱', price: '￥79' },
					{ id: 5, src: '../../static/img/index/img-4.png', title: 'GF合金包角拉链箱', price: '￥259' },
					{ id: 6, src: '../../static/img/index/img-5.png', title: '婴童纱布长斤三条装', price: '￥59' },
				],
				excellent: [
					'../../static/img/index/slider-1.jpg',
					'../../static/img/index/slider-2.jpg',
				],
				recommend: [{
						id: 1,
						src: '../../static/img/index/t (1).png',
						title: '狐步小吊灯',
						intro: '曼妙裙摆 任意空间的光线舞者',
						price: '￥469'
					},
					{
						id: 2,
						src: '../../static/img/index/t (2).png',
						title: '折简餐具组|碗套装',
						intro: '国画四色 诠释最美器具',
						price: '￥89'
					},
					{
						id: 3,
						src: '../../static/img/index/t (3).png',
						title: '竹枝抱枕',
						intro: '上百竹枝首尾相依 静生生物',
						price: '￥169'
					},
					{
						id: 4,
						src: '../../static/img/index/t (4).png',
						title: '澎湃声波牙刷 Pro',
						intro: '一件能明显提升幸福感的小物件',
						price: '￥259'
					},
					{
						id: 5,
						src: '../../static/img/index/t (5).png',
						title: '镜线餐具组',
						intro: '让每一餐都清爽可口',
						price: '￥399'
					},
					{
						id: 6,
						src: '../../static/img/index/t (6).png',
						title: '光合氧气花瓶',
						intro: '光影魔术手 找到植物的专属生命',
						price: '￥129'
					},
					{
						id: 7,
						src: '../../static/img/index/t (7).png',
						title: '黑白格子V领背心裙',
						intro: '简约不简单 轻松高级感',
						price: '￥339'
					},
					{
						id: 8,
						src: '../../static/img/index/t (8).png',
						title: '重磅绞花羊绒衫',
						intro: '羊绒纱线采用7针、26纱支织造而成',
						price: '￥559'
					},
					{
						id: 9,
						src: '../../static/img/index/t (9).png',
						title: '珊瑚绒加厚保暖连体衣',
						intro: '珊瑚绒御寒 加厚保暖 纯棉内里',
						price: '￥259'
					},
					{
						id: 12,
						src: '../../static/img/index/t (12).png',
						title: 'Pop Loop 慢跑鞋 男女款',
						intro: '爆米花中底 全包裹支撑鞋面',
						price: '￥339'
					},
					{
						id: 13,
						src: '../../static/img/index/t (14).png',
						title: 'M&N 尊荣白鸭绒静音冬被',
						intro: '内衬蓬松饱满 静音防羽 保暖舒适',
						price: '￥659'
					},
					{
						id: 15,
						src: '../../static/img/index/t (15).png',
						title: '小怪兽糖罐组',
						intro: '为生活加一剂萌料',
						price: '￥59'
					},

				],
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f4;
	}

	.container {

		.header {
			background-color: white;
			margin-bottom: 20rpx;

			.banner {
				width: 709rpx;
				height: 392rpx;
				padding-top: 24rpx;
				padding-bottom: 35rpx;
				margin: 0 auto;

				.photo {
					width: 709rpx;
					height: 392rpx;
				}

			}

			.cate {
				display: flex;
				justify-content: space-around;
				margin-top: 57rpx;

				.cate-item {
					text-align: center;

					.cate-title {
						font-size: 24rpx;
					}
				}

				.cate-img {
					width: 66rpx;
					height: 56rpx;
					text-align: center;
				}
			}

			.bg-img {
				text-align: center;
				margin-top: 33rpx;

				image {
					width: 708rpx;
					height: 281rpx;
				}
			}

		}

		.factory {
			background-color: white;
			padding-top: 20rpx;

			.factory-header {
				text-align: center;
				margin-bottom: 24rpx;

				.factory-title {
					font-size: 28rpx;
					color: #333333;
				}

				.factory-tip {
					font-size: 12rpx;
					color: #666666;
				}
			}

			.factory-goods {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin-bottom: 20rpx;

				.factory-detail {
					width: 44%;
					height: 249rpx;
					padding: 31rpx 14rpx 13rpx 23rpx;
					border: 1rpx solid #f5f5f5;

					.detail-title {
						font-size: 26rpx;
						color: #555555;
						margin-bottom: 20rpx;
					}

					.detail-info {
						display: flex;
						justify-content: space-around;
						align-items: flex-start;

						.detail-price {
							font-size: 24rpx;
							color: #c55a5c;
						}

						.detail-img {
							width: 170rpx;
							height: 170rpx;
						}
					}
				}
			}
		}

		/* 新品首发 */
		.new {
			background-color: white;
			padding-top: 26rpx;

			.new-header {
				text-align: center;
				margin-bottom: 22rpx;

				.new-title {
					font-size: 28rpx;
					color: #333333;
				}

				.new-tip {
					font-size: 12rpx;
					color: #666666;
				}
			}

			.new-gooods {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;

				.new-detail {
					width: 44%;
					padding: 0rpx 20rpx;
					border: 1rpx solid #f5f5f5;

					.detail-img {
						width: 315rpx;
						height: 275rpx;
					}

					.detail-title {
						font-size: 26rpx;
						color: #555555;
						margin-bottom: 15rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.detail-profile {
						font-size: 20rpx;
						color: #999999;
						margin-bottom: 30rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.detail-price {
						font-size: 26rpx;
						color: #c55a5c;
						margin-bottom: 35rpx;
					}
				}
			}
		}

		//精品热卖
		.hot {
			background-color: white;
			padding-top: 26rpx;
			margin-top: 20rpx;

			.hot-header {
				text-align: center;
				margin-bottom: 22rpx;

				.hot-title {
					font-size: 28rpx;
					color: #333333;
				}

				.hot-tip {
					font-size: 12rpx;
					color: #666666;
				}
			}

			.hot-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;

				.hot-detail {
					width: 26.5%;
					padding: 25rpx;
					border: 2rpx solid #eee;
					font-size: 26rpx;

					image {
						width: 200rpx;
						height: 190rpx;
					}

					.detail-title {
						color: #555555;
						margin-bottom: 30rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.detail-price {
						color: #c55a5c;
					}
				}
			}
		}

		.spelling {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;

			.singles {
				height: 520rpx;

				image {
					width: 374rpx;
					height: 500rpx;
				}
			}

			.globe {
				height: 520rpx;

				image {
					width: 374rpx;
					height: 248rpx;
				}
			}
		}

		.excellent {
			background-color: white;
			padding-top: 26rpx;
			padding-bottom: 30rpx;

			.excellent-header {
				text-align: center;
				margin-bottom: 22rpx;

				.excellent-title {
					font-size: 28rpx;
					color: #333333;
				}

				.excellent-tip {
					font-size: 12rpx;
					color: #666666;
				}
			}

		}

		.recommend {
			background-color: white;
			padding-top: 26rpx;
			margin-top: 20rpx;
			padding-bottom: 100rpx;

			.recommend-header {
				text-align: center;
				margin-bottom: 22rpx;

				.recommend-title {
					font-size: 28rpx;
					color: #333333;
				}

				.recommend-tip {
					font-size: 12rpx;
					color: #666666;
				}
			}

			.recommend-gooods {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;

				.recommend-detail {
					width: 44%;
					padding: 0rpx 20rpx;
					border: 1rpx solid #f5f5f5;

					.detail-img {
						width: 315rpx;
						height: 275rpx;
					}

					.detail-title {
						font-size: 26rpx;
						color: #555555;
						margin-bottom: 15rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.detail-profile {
						font-size: 20rpx;
						color: #999999;
						margin-bottom: 30rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.detail-price {
						font-size: 26rpx;
						color: #c55a5c;
						margin-bottom: 35rpx;
					}
				}
			}

		}
	}
</style>